<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.mobile.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
    <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" id="scrollview-home" data-title="Photo Gallery">
    <div id="scrollview-container">
        <div data-role="scrollview" data-page="2">
            <div class="photo photo1" data-role="page">
            </div><div class="photo photo2" data-role="page">
            </div><div class="photo photo3" data-role="page">
            </div><div class="photo photo4" data-role="page">
            </div><div class="photo photo5" data-role="page">
            </div><div class="photo photo6" data-role="page">
            </div><div class="photo photo7" data-role="page">
            </div><div class="photo photo8" data-role="page">
            </div><div class="photo photo9" data-role="page">
            </div><div class="photo photo10" data-role="page">
            </div>
        </div>
    </div>
    <!--ul data-role="listview" data-style="inset" data-type="group">
        <li>Photo Albums
            <ul>
                <li class="album-set"><a>Cities</a></li>
                <li><a>Sunsets</a></li>
            </ul>
        </li>
    </ul-->
</div>

<style>
    #scrollview-home .photo {
        margin: 0;
        height: 220px;
        display: inline-block;
        -webkit-background-size: auto 100%;
        background-size: auto 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .km-wp #scrollview-home .photo {
        height: 300px;
    }

    .photo1 {background-image: url("../../content/mobile/cities/220/sydney.jpg");}
    .photo2 {background-image: url("../../content/mobile/cities/220/bonn.jpg");}
    .photo3 {background-image: url("../../content/mobile/cities/220/boston.jpg");}
    .photo4 {background-image: url("../../content/mobile/cities/220/cairo.jpg");}
    .photo5 {background-image: url("../../content/mobile/cities/220/cancun.jpg");}
    .photo6 {background-image: url("../../content/mobile/cities/220/cape-town.jpg");}
    .photo7 {background-image: url("../../content/mobile/cities/220/liverpool.jpg");}
    .photo8 {background-image: url("../../content/mobile/cities/220/london.jpg");}
    .photo9 {background-image: url("../../content/mobile/cities/220/melbourne.jpg");}
    .photo10 {background-image: url("../../content/mobile/cities/220/san-francisco.jpg");}

    #scrollview-container {
        margin: 60px 0 1em 0;
        padding-bottom: 20px;
        padding-top: 20px;
        background: rgba(0,0,0,.1);
        border: 1px solid rgba(0,0,0,.3);
        border-width: 1px 0;
        box-shadow: 0 1px 1px rgba(255,255,255,.3);
    }

    .km-ios #scrollview-container {
        background: url(../../content/shared/images/patterns/pattern1.png);
        box-shadow: 0 0 2px rgba(255,255,255,.5), inset 0 0 7px #000;
    }

    #scrollview-home .km-ios .km-content {
        background: #bbb;
    }
    .km-android .km-list .album-set a {
    	background-color: #277692;
    }
    .km-ios .km-list .album-set a {
    	background-color: #bbb;
    }
    .km-ios #scrollview-home .km-navbar {
        background: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, rgba(255,255,255,.5)), color-stop(.06, rgba(255,255,255,.45)), color-stop(.5, rgba(255,255,255,.2)), color-stop(.5, rgba(255,255,255,.15)), color-stop(1, rgba(100,100,100,0))), url(../../content/shared/images/patterns/pattern5.png);
        background: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,.45) 6%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.15) 50%, rgba(100,100,100,0)), url(../../content/shared/images/patterns/pattern5.png);
	}
    .km-ios #scrollview-home .km-navbar .km-button
    {
        background-color: #000;
    }
	.km-ios #scrollview-home .km-content {
        background: url(../../content/shared/images/patterns/pattern6.png);
        box-shadow: inset 0 0 30px #000;
	}

	.km-ios #scrollview-container .km-pages .km-current-page {
		background-color: #ff009c;
	}
	.km-ios #scrollview-container .km-pages {
		padding-top: 18px;
	}
    .km-ios #scrollview-home .km-view-title
    {
        color: #fff;
        text-shadow: 0 -1px rgba(0,0,0,.5);
    }
</style>


    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>
